<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont">&#xe6ae;</span>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe638;</span>
      输入城市/景点/游玩主题
     </div>
    <div class="header-right">
       城市
      <span class="iconfont">&#xe6aa;</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
// 1rem=html font-size=50px
 .header
    display:flex
    line-height:2.86rem
    background #00bcd4
    color:#fff
    .header-left
      padding-left:1rem
      margin-left:.5rem
      width:2rem
      float:left
    .header-input
      flex:1
      height:2rem
      line-height:2rem
      margin-top:.5rem
      margin-left:1rem
      margin-right:1rem
      padding-left:.2rem
      background:#fff
      border-radius:.1rem
      color:#ccc
    .header-right
      width:4rem
      float:right
      text-align:center


</style>
